<template>
  <!-- 全部商品 -->
  <div class="goods">
    <div class="banxin">
      <img src="../assets/images/home/ad.png" alt="" />
      <section class="cur">
        <div class="paixu">
          <strong>排序:</strong>
          <span
            v-for="(item, index) in paixuArr"
            :key="index"
            :class="{ active: paixuindex === index }"
            @click="paixu(index)"
            >{{ item.txt }}</span
          >
        </div>
        <div class="paixu">
          <strong>分类:</strong>
          <span
            v-for="(item, index) in fenleiArr"
            :key="index"
            :class="{ active: fenleiindex === index }"
            @click="fenlei(index)"
            >{{ item.txt }}</span
          >
        </div>
      </section>
      <List :arr="MoreArr" />
    </div>
  </div>
</template>

<script>
import List from "@/components/List.vue";
import { MoreApi } from "@/request/api";
export default {
  data() {
    return {
      paixuindex: 0,
      fenleiindex: 0,
      // 排序数组
      paixuArr: [
        { txt: "全部", min: 0, max: 10000 },
        { txt: "我能兑换", min: 0, max: 1000 },
        { txt: "0-500分", min: 0, max: 500 },
        { txt: "500-1000分", min: 500, max: 1000 },
        { txt: "1000-1500分", min: 1000, max: 1500 },
        { txt: "1500-2500分", min: 1500, max: 2500 },
      ],
      // 分类数组
      fenleiArr: [
        { txt: "全部", type: 0 },
        { txt: "实物礼品", type: 1 },
        { txt: "虚拟礼品", type: 2 },
      ],
      goodsObj: {
        //  1->精品推荐 2-> 热门兑换 0->全部
        did: 0,
        // 1->实体商品 2->虚拟商品 0->全部
        type: 0,
        // 大于多少积分，最少是0
        min: 0,
        // 少于多少积分，最多是10000，当传入0的时候，会直接返回所有商品
        max: 10000,
        // 商品关键词
        keyword: "",
      },
      MoreArr: [],
    };
  },
  methods: {
    // 点击了排序
    paixu(index) {
      this.paixuindex = index;
      this.goodsObj.min = this.paixuArr[index].min;
      this.goodsObj.max = this.paixuArr[index].max;
      this.getGoods();
    },
    // 点击了分类
    fenlei(index) {
      this.fenleiindex = index;
      this.goodsObj.type = this.fenleiArr[index].type;
      this.getGoods();
    },
    // 封装发送请求
    getGoods() {
      MoreApi(this.goodsObj).then((res) => {
        if (res.data.code === 0) {
          this.MoreArr = res.data.data;
        }
      });
    },
  },
  components: {
    List,
  },
  created() {
    // 获取从搜索框过来的keyword
    if (this.$route.query.keyword) {
      this.goodsObj.keyword = this.$route.query.keyword;
    } else {
      this.goodsObj.keyword = "";
    }
    this.getGoods();
  },
  watch:{
    $route: {
      handler(newVal, oldVal) {
        // 旧值和新值不一样的时候，页面要刷新
        if (newVal.query.keyword !== oldVal.query.keyword) {
          this.$router.go(0);
        }
      },
      deep: true,
    },
  }
};
</script>
 
<style lang = "less" scoped>
@import "../assets/base.less";
.goods {
  background: #f5f5f5;
  .cur {
    padding: 40px 0 10px;
    div {
      margin-bottom: 32px;
      strong {
        font-size: 18px;
        font-weight: bold;
        color: #000;
        margin-right: 10px;
      }
      span {
        font-size: 18px;
        color: #999;
        cursor: pointer;
        margin-right: 30px;
        &.active {
          color: @blue;
          font-weight: bold;
        }
      }
    }
  }
}
</style>